<template>
  <div class="recommend-card__module">
    <mivaLink :isNewTag="true" :to="titleTo" class="pic-box">
      <img :src="cover" />
    </mivaLink>
    <div class="info__group">
      <mivaLink :isNewTag="true" :to="titleTo" class="title__item">{{title}}</mivaLink>
      <mivaLink :isNewTag="true" :to="nicknameTo" class="info-extend__item up-nickname__item">{{nickname}}</mivaLink>
      <div class="info-extend__item">{{hit}} 点击 · {{rpcount}} 评论</div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        archive: {
            type: Object,
            default: () => ({}),
        },
        type: {
            type: [Number, String],
            required: true,
        },
    },
    computed: {
        aid() {
            return this.archive.aid;
        },
        uid() {
            return this.archive.uid;
        },
        titleTo() {
            const obj = {
                2: '/detailAudio',
                4: '/detailArticle',
            };
            return `${obj[this.type]}/${btoa(this.aid)}`;
        },
        nicknameTo() {
            return `/space/${this.uid}`;
        },
        cover() {
            return this.archive.cover || '//miva-unmcc.oss-cn-beijing.aliyuncs.com/timg.jpg';
        },
        title() {
            return this.archive.title || '标题';
        },
        nickname() {
            return this.archive.nickname || '九条米法';
        },
        hit() {
            return this.archive.hit || 0;
        },
        rpcount() {
            return this.archive.rpcount || 0;
        },
        mark() {
            return this.archive.mark || '';
        },
    },
};
</script>

<style lang="less">
.recommend-card__module {
  padding: 6px 0;
  display: flex;
  .pic-box {
    width: 141px;
    height: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .info__group {
    margin-left: 10px;
    .title__item {
      height: 36px;
      line-height: 18px;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500;
      word-break: break-word;
      text-align: justify;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  .info-extend__item {
    display: block;
    height: 16px;
    font-size: 12px;
    color: #999;
    a {
      color: #999;
    }
  }
  .up-nickname__item {
    width: 160px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
